<template>
  <textarea
    id="kind_editor"
    v-model="model"
    style="width: 100%; min-height: 600px"
  />
</template>

<script setup>
import { onMounted, watch } from "vue";
// import "kindeditor/kindeditor-all-min.js";
// 下面是未压缩版本
import "kindeditor/kindeditor-all.js";
import "kindeditor/lang/zh-CN.js";
import "kindeditor/themes/default/default.css";

const model = defineModel();

onMounted(() => {
  window.editor = initEditor(KindEditor);
  // KindEditor.ready 相当于 jQuery 中的 $(document).ready
  // KindEditor.ready(initEditor);
});

// TODO：直接写入会导致选区丢失，还需要额外进行选区操作
// watch(model, (newVal, oldVal) => {
//   if (newVal === oldVal) return;
//   window.editor.html(newVal);
// });

function initEditor(K) {
  return K.create("#kind_editor", {
    width: "100%",
    height: "500px",
    langType: "zh-CN",
    items: [
      "source",
      "|",
      "undo",
      "redo",
      "|",
      "preview",
      "print",
      "template",
      "code",
      "cut",
      "copy",
      "paste",
      "plainpaste",
      "wordpaste",
      "|",
      "justifyleft",
      "justifycenter",
      "justifyright",
      "justifyfull",
      "insertorderedlist",
      "insertunorderedlist",
      "indent",
      "outdent",
      "subscript",
      "superscript",
      "clearhtml",
      "quickformat",
      "selectall",
      "|",
      "fullscreen",
      "/",
      "formatblock",
      "fontname",
      "fontsize",
      "|",
      "forecolor",
      "hilitecolor",
      "bold",
      "italic",
      "underline",
      "strikethrough",
      "lineheight",
      "removeformat",
      "|",
      "image",
      "multiimage",
      "flash",
      "media",
      "insertfile",
      "table",
      "hr",
      "emoticons",
      "baidumap",
      "pagebreak",
      "anchor",
      "link",
      "unlink",
      "|",
      "about"
    ],
    // resizeType: 1, // 只能改变高度
    // allowImageUpload: true, //允许上传图片
    // allowFileManager: true, //允许对上传图片进行管理
    // uploadJson: "/upload_img/?callBackPath=" + callBackPath, // 后端提交路径
    // // 上传图片或者文件的时候添加别的参数一并传到服务器
    // extraFileUploadParams: {
    //   csrfmiddlewaretoken: "{{ csrf_token }}"
    // },
    // afterUpload: function () {
    //   this.sync(); // 同步textarea中的内容
    // },
    // afterBlur: function () {
    //   this.sync(); // 同步textarea中的内容
    // },
    afterCreate() {
      const self = this;
      self.html(model.value);
    },
    afterChange() {
      const self = this;
      model.value = self.html();
    }
  });
}
</script>
